<template>
  <div class="container">
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row type="flex" justify="space-around">
          <el-col>
            <el-form-item label="标签名称">
              <el-input v-model="formInline.tagName" size="small"></el-input>
            </el-form-item>

            <el-form-item label="状态">
              <el-select
                v-model="formInline.state"
                placeholder="请选择"
                size="small"
              >
                <el-option label="启动" value="0"></el-option>
                <el-option label="禁用" value="1"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button @click="clean" size="small">清除</el-button>
              <el-button type="primary" @click="onSubmit" size="small"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button
              type="text"
              v-if="byid ? true : false"
              @click="$router.push('./list')"
            >
              <i class="el-icon-back"></i>返回学科</el-button
            >
            <el-button type="success" @click="addTagFN"
              ><i class="el-icon-edit">新增标签</i></el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <el-alert
        :title="`数据一共${counts}条`"
        type="info"
        show-icon
        style="margin: 0 0 15px"
      >
      </el-alert>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="280">
        </el-table-column>
        <el-table-column prop="tagName" label="标签名称" width="280">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="280">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="255">
          <template slot-scope="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="285">
          <template slot-scope="{ row }">
            <span>{{ row.state === 1 ? "已启用" : "已禁用" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="down" label="操作" width="180">
          <template slot-scope="{ row }">
            <el-button type="text" @click="getchangeState(row.id)">{{
              row.state !== 1 ? "启用" : "禁用"
            }}</el-button>
            <el-button
              type="text"
              @click="changeupdate(row.id)"
              :disabled="row.state !== 1"
              >修改</el-button
            >
            <el-button
              type="text"
              @click="open(row.id)"
              :disabled="row.state !== 1"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="center" style="margin: 20px 0 0">
        <el-col :span="6">
          <div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40, 50]"
              :page-size="pagesize"
              layout="total,sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
      <!-- 新增弹层 -->
      <el-dialog
        :title="addTag.id ? '编辑标签' : '新增标签'"
        :visible.sync="dialogVisible"
        width="30%"
        @close="btnCancel"
      >
        <el-form :model="addTag" ref="tagForm">
          <el-form-item label="所属学科">
            <el-select v-model="addTag.subjectID" placeholder="请选择">
              <el-option
                v-for="item in simpleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称">
            <el-input v-model="addTag.tagName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="btnCancel">取 消</el-button>
          <el-button type="primary" @click="btnOk">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  list,
  changeState,
  add,
  update,
  remove,
  detail as tagDetail
} from '../../api/hmmm/tags'
import { simple, detail } from '../../api/hmmm/subjects'
export default {
  data() {
    return {
      counts: 0,
      byid: this.$route.query.id,
      name: this.$route.query.name,
      addTag: {
        subjectID: '',
        tagName: '',
        id: ''
      },
      row: '',
      input: '',
      dialogVisible: false,
      state: ' ',
      total: 0,
      pagesize: 10,
      page: 1,
      id: '',
      formInline: {
        tagName: '',
        state: ''
      },
      tableData: [],
      simpleList: []
    }
  },

  methods: {
    btnOk() {
      this.dialogVisible = false
      this.$refs.tagForm.validate((isOK) => {
        if (isOK) {
          if (this.addTag.id) {
            update(this.addTag)
          } else {
            add(this.addTag)
          }
        }
      })
      this.getList()
    },
    btnCancel() {
      this.dialogVisible = false
      this.addTag = {
        subjectID: '',
        tagName: '',
        id: ''
      }
    },
    // 点击删除
    open(id) {
      this.$confirm('此操作将永久删除该学科, 是否继续?')
        .then(async () => {
          return await remove({ id: id })
        })
        .then(() => {
          this.getList()
          this.$message.success('删除部门成功')
        })
    },
    // 点击搜索
    onSubmit() {
      this.getList()
    },
    // 搜索栏清除
    clean() {
      this.formInline = {
        tagName: '',
        state: ''
      }
      this.getList()
    },

    // 页码
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage4 = val
      this.getList()
    },
    // 列表
    async getList() {
      let res = []
      if (!this.formInline.state) {
        res = await list({
          page: this.currentPage4,
          pagesize: this.pagesize,
          tagName: this.formInline.tagName
        })
      } else {
        res = await list({
          page: this.currentPage4,
          pagesize: this.pagesize,
          ...this.formInline
        })
      }
      this.tableData = res.data.items
      this.total = res.data.counts
      this.state = res.data.state
      this.counts = res.data.counts
    },
    // 状态
    async getchangeState(id) {
      let data = {}
      this.tableData.forEach((item) => {
        if (item.id === id) {
          item.state = item.state === 0 ? 1 : 0
          data = item
        }
      })
      changeState(data)
      this.getList()
    },
    // 修改
    async changeupdate(id) {
      this.dialogVisible = true
      const tagres = await tagDetail({ id: id })
      this.addTag = {
        subjectID: tagres.data.subjectID,
        tagName: tagres.data.tagName,
        id
      }
    },
    // 学科简单列表
    async getsimpleList() {
      const res = await simple()
      this.simpleList = res.data
    },
    // 新增标签
    addTagFN() {
      this.dialogVisible = true
      this.getsimpleList()
    },
    // 返回学科
    async regetlist() {
      const { data } = await list({
        subjectID: this.byid,
        page: this.currentPage,
        pagesize: this.pagesize
      })
      console.log(data)
      this.tableData = data.items
      this.counts = data.counts
    }
  },
  created() {
    // this.getList();
    // this.regetlist();
    if (this.byid) {
      this.regetlist()
    } else {
      this.getList()
    }
  },
  watch: {
    counts(value) {
      this.counts = value
    }
  }
}
</script>
<style scoped >
.container {
  padding: 20px;
}

.el-input {
  width: 220px;
}
</style>
